<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd"
                    v-hasPermi="['equipment:hailer:add']">添加喊话器
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleHailerSetting"
                    v-hasPermi="['equipment:hailer:add']">喊话设置
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleLightSetting"
                    v-hasPermi="['equipment:hailer:add']">灯光设置
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handModelSetting"
                    v-hasPermi="['equipment:model:add']">喊话器型号新增
                </el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="hailerList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="喊话器编号" align="center" prop="hiId" />
            <el-table-column label="喊话器名称" align="center" prop="hiName" />
            <el-table-column label="品牌" align="center" prop="hiBrand">
                <template #default="scope">
                    <dict-tag :options="hailer_brands" :value="scope.row.hiBrand" />
                </template>
            </el-table-column>
            <el-table-column label="型号" align="center" prop="modelName" />
            <!-- <el-table-column label="灯光控制" align="center" prop="lightSupport">
                <template #default="scope">
                    <dict-tag :options="light_support" :value="scope.row.lightSupport" />
                </template>
            </el-table-column> -->
            <el-table-column label="灯光控制" align="center" prop="lightTheme">
                <template #default="scope">
                    <el-tag v-if="scope.row.lightTheme !== null" size="small">{{ scope.row.lightTheme }}</el-tag>
                    <el-tag v-else size="small">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="绑定无人机" align="center" prop="droneName" />
            <el-table-column label="所属组织" align="center" prop="hiDeptName" />
            <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['equipment:hailer:edit']">修改
                    </el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" style="color: red;"
                        v-hasPermi="['equipment:hailer:remove']">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改喊话器设备信息对话框 -->
        <el-dialog :title="title" v-model="open" width="400px" append-to-body>
            <el-form ref="hailerRef" :model="form" :rules="rules" label-width="110px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="喊话器名称" prop="hiName">
                            <el-input v-model="form.hiName" placeholder="请输入喊话器名称" />
                        </el-form-item>
                        <!-- <el-form-item label="品牌" prop="hiBrand">
                            <el-select v-model="form.hiBrand" placeholder="请选择品牌">
                                <el-option v-for="dict in hailer_brands" :key="dict.value" :label="dict.label"
                                    :value="parseInt(dict.value)"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="型号" prop="modelId">
                            <el-input v-model="form.modelId" placeholder="请输入型号" />
                        </el-form-item> -->

                        <el-form-item label="品牌" prop="hiBrand">
                            <el-select v-model="form.hiBrand" placeholder="请选择品牌" @change="updateModels">
                                <el-option v-for="dict in hailer_brands" :key="dict.value" :label="dict.label"
                                    :value="parseInt(dict.value)" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="型号" prop="modelId">
                            <el-select v-model="form.modelId" placeholder="请选择型号">
                                <el-option v-for="model in currentModels" :key="model.value" :label="model.label"
                                    :value="model.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="绑定无人机" prop="droneId">
                            <el-select v-model="form.droneId" placeholder="请选择无人机">
                                <el-option
                                    v-for="item in droneList"
                                    :key="item.id"
                                    :label="item.droneName"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="灯光支持" prop="lightSupport">
                            <!-- //如果LightList为空，则显示空，并禁用下拉框，若不为空，就显示下拉框，内容是LightList.lcTheme -->
                            <el-select v-model="form.lightId" placeholder="请选择灯光支持" :disabled="lightList.length === 0"
                                v-if="lightList.length > 0">
                                <el-option v-for="dict in lightList" :key="dict.lcId" :label="dict.lcTheme"
                                    :value="dict.lcId"></el-option>
                            </el-select>
                            <el-select v-else :disabled="true" placeholder="无可用灯光支持">
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>


        <!-- 喊话设置对话框 -->
        <el-dialog title="喊话设置" v-model="handleHailerOpen" width="600px">
            <el-divider style="margin-top: 0px;"></el-divider>
            <el-form-item label="音量设置" prop="volume">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-input v-model.number="val" placeholder="请输入音量" />
                    </el-col>
                    <el-col :span="12">
                        <el-slider v-model="val" :min="0" :max="100" @change="handleVolumeChange" />
                    </el-col>
                </el-row>
            </el-form-item>
            <div style="display: flex; justify-content: space-between;">
                <el-link type="primary">TTS文本库</el-link>
                <el-button type="primary" @click="handleAddAnnouncement">添加TTS文本</el-button>
            </div>
            <el-table v-loading="loading" :data="announcementList">
                <!-- <el-table-column label="关联的喊话器设备ID" align="center" prop="hailerId"/>
                    <el-table-column label="音量" align="center" prop="haVolume"/> -->
                <el-table-column label="主题" align="center" prop="haTheme" />
                <el-table-column label="TTS文本库内容" align="center" prop="haTtsText" />
                <el-table-column label="操作人" align="center" prop="haOperator" />
                <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleUpdateAnnouncement(scope.row)"
                            v-hasPermi="['system:announcement:edit']">修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDeleteAnnouncement(scope.row)"
                            style="color: red;" v-hasPermi="['system:announcement:remove']">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 添加或修改喊话参数配置对话框 -->
        <el-dialog :title="title" v-model="openAnnouncement" width="400px" append-to-body>
            <el-form ref="announcementRef" :model="anform" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <!-- <el-form-item label="关联的喊话器设备ID" prop="hailerId">
                            <el-input v-model="anform.hailerId" placeholder="请输入关联的喊话器设备ID" />
                        </el-form-item> -->
                        <!-- <el-col :span="formSpan">
                                <el-form-item label="音量" prop="haVolume">
                                    <el-input v-model="anform.haVolume" placeholder="请输入音量"/>
                                </el-form-item>
                            </el-col> -->
                        <el-form-item label="主题" prop="haTheme">
                            <el-input v-model="anform.haTheme" placeholder="请输入主题" />
                        </el-form-item>
                        <el-form-item label="TTS文本库内容" prop="haTtsText">
                            <el-input v-model="anform.haTtsText" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="anform.remark" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFormText">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 灯光设置对话框 -->
        <el-dialog :title="title" v-model="handleLightOpen" width="800px" append-to-body>
            <el-divider style="margin-top: 0px;"></el-divider>
            <!--             
            <div class="right-align">
                <el-button type="primary" @click="handleAddLightControl">添加灯光</el-button>
            </div> -->
            <div style="display: flex; justify-content: space-between;">
                <el-link type="primary">灯光库</el-link>
                <el-button type="primary" @click="handleAddLightControl">添加灯光</el-button>
            </div>
            <el-table v-loading="loading" :data="lightList">
                <!-- <el-table-column label="主键ID" align="center" prop="lcId" /> -->
                <el-table-column label="主题" align="center" prop="lcTheme" width="110px" />
                <!-- <el-table-column label="灯光内容" align="center" prop="lcText" width="400px">
                    <template #default="scope">
                        <span>俯仰角度: {{ scope.row.tiltAngle }} </span> |
                        <span v-if="scope.row.searchlightStatus === 0">探照灯关闭</span>
                        <span v-else-if="scope.row.searchlightStatus === 1">探照灯常亮: 亮度: {{ scope.row.brightness }},爆闪频率:
                            {{ scope.row.strobeFreq
                            }}</span>
                        <span v-else-if="scope.row.searchlightStatus === 2">探照灯爆闪: 亮度: {{ scope.row.brightness }},爆闪频率:
                            {{ scope.row.strobeFreq
                            }}</span> |
                        <span v-if="scope.row.warningLightStatus === 0">警示灯关闭</span>
                        <span v-else-if="scope.row.warningLightStatus === 1">警示灯快闪: 颜色: {{ scope.row.colorConfig
                            }}</span>
                        <span v-else-if="scope.row.warningLightStatus === 2">警示灯慢闪: 颜色: {{ scope.row.colorConfig
                            }}</span>
                        <span v-else-if="scope.row.warningLightStatus === 3">警示灯齐闪: 颜色: {{ scope.row.colorConfig
                            }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="灯光内容" align="center" prop="lcText" width="400px">
                    <template #default="scope">
                        <span>俯仰角度: {{ scope.row.tiltAngle }} </span> |
                        <span>{{ formatSearchlightStatus(scope.row.searchlightStatus, scope.row.brightness,
                            scope.row.strobeFreq) }}</span> |
                        <span>{{ formatWarningLightStatus(scope.row.warningLightStatus, scope.row.colorConfig) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作人" align="center" prop="lcOperator" width="110px" />
                <el-table-column label="操作" align="center" width="160px" class-name="smal-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleUpdateLight(scope.row)"
                            v-hasPermi="['system:control:edit']">修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDeleteLight(scope.row)"
                            style="color: red;" v-hasPermi="['system:control:remove']">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 添加或修改灯光控制配置对话框 -->
        <el-dialog :title="title" v-model="openLight" width="400px" append-to-body>
            <template #title>
                <span style="text-align: center; width: 100%; display: block;">{{ title }}</span>
            </template>
            <el-form ref="controlRef" :model="liform" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="主题" prop="lcTheme">
                            <el-input v-model="liform.lcTheme" placeholder="请输入主题" />
                        </el-form-item>
                        <el-form-item label="俯仰角度" prop="tiltAngle">
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-input v-model.number="liform.tiltAngle" />
                                </el-col>
                                <el-col :span="12">
                                    <el-slider v-model="liform.tiltAngle" :min="0" :max="180" />
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="探照灯状态" prop="warningLightStatus">
                            <el-select v-model="liform.searchlightStatus" placeholder="请选择探照灯状态">
                                <el-option v-for="dict in searchlight_status" :key="dict.value" :label="dict.label"
                                    :value="parseInt(dict.value)"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- //如果探照灯状态为0,禁止亮度调节 -->
                        <el-form-item label="亮度调节" prop="brightness">
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-input v-model.number="liform.brightness"
                                        :disabled="liform.searchlightStatus === 0" />
                                </el-col>
                                <el-col :span="12">
                                    <el-slider v-model="liform.brightness" :min="0" :max="100"
                                        :disabled="liform.searchlightStatus === 0" />
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="爆闪频率" prop="strobeFreq">
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-input v-model.number="liform.strobeFreq"
                                        :disabled="liform.searchlightStatus === 0" />
                                </el-col>
                                <el-col :span="12">
                                    <el-slider v-model="liform.strobeFreq" :min="0" :max="100"
                                        :disabled="liform.searchlightStatus === 0" />
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="警示灯状态" prop="warningLightStatus">
                            <el-select v-model="liform.warningLightStatus" placeholder="请选择警示灯状态">
                                <el-option v-for="dict in warning_light_status" :key="dict.id" :label="dict.label"
                                    :value="parseInt(dict.value)"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="颜色配置" prop="colorConfig">
                            <el-radio-group v-model="liform.colorConfig" :disabled="liform.warningLightStatus === 0">
                                <el-radio v-for="color in colorOptions" :key="color.value" :label="color.label"
                                    :value="color.value">
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- <el-form-item label="删除标记" prop="isDeleted">
                    <el-input v-model="liform.isDeleted" placeholder="请输入删除标记" />
                </el-form-item> -->
                        <!-- <el-form-item label="备注" prop="remark">
                    <el-input v-model="liform.remark" placeholder="请输入备注" />
                </el-form-item>
                <el-form-item label="操作人" prop="lcOperator">
                    <el-input v-model="liform.lcOperator" placeholder="请输入操作人" />
                </el-form-item> -->
                        <!-- <el-form-item label="灯光内容" prop="lcText">
                    <el-input v-model="liform.lcText" type="textarea" placeholder="请输入内容" />
                </el-form-item> -->
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFormLight">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 添加或修改喊话器型号信息对话框 -->
        <el-dialog :title="title" v-model="openModel" width="400px" append-to-body>
            <el-form ref="modelRef" :model="mdform" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="formSpan">
                        <el-form-item label="品牌ID" prop="brandId">
                            <el-select v-model="mdform.brandId" placeholder="请选择品牌ID">
                                <el-option v-for="dict in hailer_brands" :key="dict.value" :label="dict.label"
                                    :value="parseInt(dict.value)"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="型号名称" prop="modelName">
                            <el-input v-model="mdform.modelName" placeholder="请输入型号名称" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="formSpan">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="mdform.remark" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col> -->
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitFormModel">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>


        <!-- 喊话器型号设置对话框 -->
        <el-dialog title="型号设置" v-model="handleModelOpen" width="600px">
            <el-divider style="margin-top: 0px;"></el-divider>
            <div style="display: flex; justify-content: space-between;">
                <el-link type="primary">喊话器型号库</el-link>
                <el-button type="primary" @click="handleAddModel">新增喊话器</el-button>
            </div>
            <!-- 喊话器型号表 -->
            <el-table v-loading="loading" :data="modelList">
                <el-table-column label="型号名称" align="center" prop="modelName" />
                <el-table-column label="品牌ID" align="center" prop="brandId">
                    <template #default="scope">
                        <dict-tag :options="hailer_brands" :value="scope.row.brandId" />
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleUpdateModel(scope.row)"
                            v-hasPermi="['equipment:model:edit']">修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDeleteModel(scope.row)"
                            v-hasPermi="['equipment:model:remove']">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>


    </div>
</template>

<script setup name="Hailer">
import {
    listHailer,
    getHailer,
    delHailer,
    addHailer,
    updateHailer,
    listDrone
} from "@/api/equipment/hailer";
import {
    listAnnouncement,
    getAnnouncement,
    delAnnouncement,
    addAnnouncement,
    updateAnnouncement,
} from "@/api/equipment/hailerAnnouncement";
import {
    listLightControl,
    getLightControl,
    delLightControl,
    addLightControl,
    updateLightControl
} from "@/api/equipment/LightControl";
import {
    listModel,
    getModel,
    delModel,
    addModel,
    updateModel
} from "@/api/equipment/model";
import { LocationInformation } from "@element-plus/icons-vue";
import { get } from "@vueuse/core";
import { reactive } from "vue";
const { proxy } = getCurrentInstance();
const { hailer_brands, light_support } = proxy.useDict('hailer_brands', 'light_support');
const { warning_light_status, searchlight_status } = proxy.useDict('warning_light_status', 'searchlight_status');

import useUserStore from '@/store/modules/user'


const hailerList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const formSpan = ref(24);
const volume = ref(50);
const radio = ref(5);

const colorOptions = reactive([
    { value: 1, label: '红色' },
    { value: 2, label: '蓝色' },
    { value: 3, label: '绿色' },
    { value: 4, label: '黄色' },
    { value: 5, label: '白色' }
])
const data = reactive({
    form: {},
    anform: {},
    liform: {},
    mdform: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        hiName: null,
        hiBrand: null,
        modelId: null,
        droneId: null,
        lightSupport: null,
        isDeleted: null
    },
    anQueryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    lightQueryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    mdQueryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    rules: {
        hiName: [
            {
                required: true, message: "喊话器名称不能为空", trigger: "blur"
            }
        ],
        hiBrand: [
            {
                required: true, message: "品牌不能为空", trigger: "change"
            }
        ],
        // lightSupport: [
        //     {
        //         required: true, message: "是否支持灯光不能为空", trigger: "change"
        //     }
        // ],
        haTheme: [
            {
                required: true, message: "主题不能为空", trigger: "blur"
            }
        ],
        haTtsText: [
            {
                required: true, message: "TTS文本库内容不能为空", trigger: "blur"
            }
        ]
    }
})
    ;

const { queryParams, form, rules, anQueryParams, anform, lightQueryParams, liform, mdform, mdQueryParams } = toRefs(data);

/** 查询喊话器设备信息列表 */
function getList() {
    loading.value = true;
    listHailer(queryParams.value).then(response => {
        hailerList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

// 取消按钮
function cancel() {
    open.value = false;
    openAnnouncement.value = false;
    openLight.value = false;
    openModel.value = false;
    reset();
    resetan();
    resetli();
    resetmd();
}

// 表单重置
function reset() {
    form.value = {
        hiId: null,
        hiName: null,
        hiBrand: null,
        modelId: null,
        droneId: null,
        lightSupport: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
    };
    proxy.resetForm("hailerRef");
}
// 表单重置
function resetan() {
    anform.value = {
        haId: null,
        hailerId: null,
        haTheme: null,
        haTtsText: null,
        haVolume: null,
        haOperator: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,

    };
    proxy.resetForm("announcementRef");
}
// 表单重置
function resetli() {
    liform.value = {
        tiltAngle: 0,
        brightness: 1,
        strobeFreq: 1,
        searchlightStatus: 0,
        warningLightStatus: 0,
    };
    proxy.resetForm("controlRef");
}
function resetmd() {
    mdform.value = {

    };
    proxy.resetForm("modelRef");
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

const hiDeptName = useUserStore().deptName
/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加喊话器设备信息";
    form.value.hiBrand = null; // 清空品牌选择
    currentModels.value = []; // 清空型号选择
    form.value.hiDeptName = hiDeptName;
    console.log(form.value);
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    const _id = row.hiId || ids.value
    getHailer(_id).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改喊话器设备信息";
        console.log(form.value);
    });
    updateModels(row.hiBrand);
    console.log(currentModels.value);
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["hailerRef"].validate(valid => {
        if (valid) {
            if (form.value.hiId != null) {
                updateHailer(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            }
            else {
                addHailer(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    }
    );
}

/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.hiId || ids.value;
    proxy.$modal.confirm('是否确认删除喊话器设备信息编号为"' + _ids + '"的数据项？').then(function () {
        return delHailer(_ids);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}
/** 导出按钮操作 */
function handleExport() {
    proxy.download('equipment/hailer/export', {
        ...queryParams.value
    }, `hailer_${new Date().getTime()}.xlsx`)
}



const handleHailerOpen = ref(false);
const announcementList = ref([]);

function getAnnouncementList() {
    loading.value = true;
    listAnnouncement(anQueryParams.value).then(response => {
        announcementList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

/**喊话设置 */
function handleHailerSetting() {
    getAnnouncementList();
    handleHailerOpen.value = true;
}
const openAnnouncement = ref(false);
/**新增按钮操作 */
function handleAddAnnouncement() {
    resetan();
    openAnnouncement.value = true;
    title.value = "添加喊话参数配置";
}
/** 修改按钮操作 */
function handleUpdateAnnouncement(row) {
    resetan();
    const _haId = row.haId || ids.value
    getAnnouncement(_haId).then(response => {
        anform.value = response.data;
        openAnnouncement.value = true;
        title.value = "修改喊话参数配置";
        console.log(anform.value);
    });
}
/** 删除按钮操作 */
function handleDeleteAnnouncement(row) {
    const _haIds = row.haId || ids.value;
    proxy.$modal.confirm('是否确认删除喊话参数配置编号为"' + _haIds + '"的数据项？').then(function () {
        return delAnnouncement(_haIds);
    }).then(() => {
        getAnnouncementList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

/** 提交按钮 */
function submitFormText() {
    proxy.$refs["announcementRef"].validate(valid => {
        if (valid) {
            if (anform.value.haId != null) {
                updateAnnouncement(anform.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    openAnnouncement.value = false;
                    getAnnouncementList();
                });
            }
            else {
                addAnnouncement(anform.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    openAnnouncement.value = false;
                    getAnnouncementList();
                });
            }
        }
    }
    );
}


const handleLightOpen = ref(false);
const lightList = ref([]);
function getLightList() {
    loading.value = true;
    listLightControl(lightQueryParams.value).then(response => {
        lightList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}
/**灯光设置 */
function handleLightSetting() {
    getLightList();
    handleLightOpen.value = true;
    title.value = "灯光设置";
}

const openLight = ref(false);
/** 新增按钮操作 */
function handleAddLightControl() {
    resetli();
    openLight.value = true;
    title.value = "添加灯光";
}

/** 修改按钮操作 */
function handleUpdateLight(row) {
    resetli();
    const _lcId = row.lcId || ids.value
    getLightControl(_lcId).then(response => {
        liform.value = response.data;
        openLight.value = true;
        title.value = "修改灯光";
    });
}

/** 提交按钮 */
function submitFormLight() {
    proxy.$refs["controlRef"].validate(valid => {
        if (valid) {
            if (liform.value.lcId != null) {
                updateLightControl(liform.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    openLight.value = false;
                    getLightList();
                });
            }
            else {
                addLightControl(liform.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    openLight.value = false;
                    getLightList();
                });
            }
        }
    }
    );
}
/** 删除按钮操作 */
function handleDeleteLight(row) {
    const _lcIds = row.lcId || ids.value;
    proxy.$modal.confirm('是否确认删除灯光控制配置编号为"' + _lcIds + '"的数据项？').then(function () {
        return delLightControl(_lcIds);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

/**音量控制 */
const val = ref(0);
function handleVolumeChange(val) {
    //这里调节音量是直接调节全部，接口未加入
    console.log(val);
}

function formatSearchlightStatus(status, brightness, strobeFreq) {
    if (status === 0) return '探照灯关闭';
    if (status === 1) return `探照灯常亮: 亮度: ${brightness}, 爆闪频率: ${strobeFreq}`;
    if (status === 2) return `探照灯爆闪: 亮度: ${brightness}, 爆闪频率: ${strobeFreq}`;
    return '';
}
function formatWarningLightStatus(status, colorConfig) {
    // 根据 colorConfig 到 colorOptions 找到对应 value，然后显示label
    const colorOption = colorOptions.find(color => color.value === parseInt(colorConfig));
    const colorLabel = colorOption ? colorOption.label : '未知颜色';

    if (status === 0) return '警示灯关闭';
    if (status === 1) return `警示灯快闪: 颜色: ${colorLabel}`;
    if (status === 2) return `警示灯慢闪: 颜色: ${colorLabel}`;
    if (status === 3) return `警示灯齐闪: 颜色: ${colorLabel}`;
    return '';
}

// 模拟的型号数据，按照品牌分组
const brand_models = ref({});

//对喊话器型号列表根据品牌分类
function groupByBrand(modelList) {
    console.log(modelList);
    //清空brand_models
    brand_models.value = {};
    modelList.forEach(model => {
        if (!brand_models.value[model.brandId]) {
            brand_models.value[model.brandId] = [];
        }
        brand_models.value[model.brandId].push({ value: model.modelId, label: model.modelName });
    });
    console.log(brand_models.value);
}
// 当前品牌对应的型号列表
const currentModels = ref([]);

// 更新型号列表的方法
// const updateModels = (brandId) => {
//     form.value.modelId = ''; // 清空当前选择的型号
//     currentModels.value = brand_models.value[brandId] || [];
//     console.log(currentModels.value);
// };

function updateModels(brandId) {
    form.value.modelId = ''; 
    currentModels.value = brand_models.value[brandId] || [];
    console.log(currentModels.value);
};


// 获取喊话器型号列表
const modelList = ref([]);
function getModelList() {
    loading.value = true;
    listModel(mdQueryParams.value).then(response => {
        modelList.value = response.rows;
        total.value = response.total;
        groupByBrand(modelList.value);
        loading.value = false;

    });
}

//喊话器型号管理
const handleModelOpen = ref(false);
const handModelSetting = () => {
    getModelList();
    handleModelOpen.value = true;
}
const openModel = ref(false);
/** 新增按钮操作 */
const handleAddModel = () => {
    resetmd();
    openModel.value = true;
    title.value = "添加喊话器型号";
}

/** 修改按钮操作 */
function handleUpdateModel(row) {
    resetmd();
    const _modelId = row.modelId || ids.value
    getModel(_modelId).then(response => {
        mdform.value = response.data;
        openModel.value = true;
        title.value = "修改喊话器型号信息";
    });
}

/** 提交按钮 */
function submitFormModel() {
    proxy.$refs["modelRef"].validate(valid => {
        if (valid) {
            if (mdform.value.modelId != null) {
                updateModel(mdform.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    openModel.value = false;
                    getModelList();
                    getList();
                });
            }
            else {
                addModel(mdform.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    openModel.value = false;
                    getModelList();
                });
            }
        }
    }
    );
}

/** 删除按钮操作 */
function handleDeleteModel(row) {
    const _modelIds = row.modelId || ids.value;
    proxy.$modal.confirm('是否确认删除喊话器型号信息编号为"' + _modelIds + '"的数据项？').then(function () {
        return delModel(_modelIds);
    }).then(() => {
        getModelList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}


// 添加无人机列表的响应式变量
const droneList = ref([]);

// 添加获取无人机列表的方法
function getDroneList() {
    listDrone().then(response => {
        droneList.value = response.rows;
    });
}

getLightList();
getList();
getModelList();
getDroneList();
</script>
<style scoped>
.slider-demo-block {
    max-width: 600px;
    display: flex;
    align-items: center;
}

.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 12px;
}

.right-align {
    text-align: right;
}
</style>
